<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    
    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">

    <link href="css/order.css" rel="stylesheet">
</head>

<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/head.js"></script>
    <script src="js/Utils.js"></script>

    <script src="js/mock.js"></script>
    <script src="mock/orders.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
    <div class="head"></div>
    <div class="nav_head"></div>

    <div class="main"></div>
    <script>
        let user = hasLogin()
        
        if (!user) {
            alert("请先登录")
            location.href = 'login.html'
        }


            
        $('document').ready(function(){
            let paramter = getURIParameter(window.location.search.substring(1))

            let page = Number(paramter.page)

            if(!page)
                page = 1

            let d = {
                username : user.username
                
            }

            d = JSON.stringify(d)
            $.ajax({
                data: d,
                url:baseUrl + 'get_orders.php?page='+page,
                type: 'POST',
                success:function(res){
                    
                    if(typeof(res) == 'string'){
                        res = JSON.parse(res)
                    }

                    if(res.code == 200){
                        console.log(res)
                        render(res.data)
                    }else{
                        console.log("获取订单失败")
                    }
                }
            })

            function render(data){
                
                let order_list = data.order_list
                if(order_list.lenght == 0 || data.totalPage < page){
                    $('.main').append(`
                        <h2 style="text-align:center">暂无任何订单</h2>
                    `)
                    return
                }


                $('.main').append(`
                    <h2 style="text-align:center;">我的订单</h2>
                `)

                $('.main').append(`
                    <table>
                        <thead>
                            <th>订单编号</th>
                            <th>日期</th>
                            <th>价格</th>
                            <th>订单状态</th>
                        </thead>
                        <tbody></tbody>
                    </table>
                `)

                for(let i = 0; i < order_list.length; i++){
                    
                    let status = order_list[i].status

                    if(status == '0') status = '待支付'
                    else if(status == '1') status = '已下单'
                    else if(status == '2') status = '已发货'
                    else if(status == '3') status = '已收货'
                    else status = '未知'

                    $('.main table tbody').append(`
                        <tr>
                            <td>
                                <a href="order_detail.html?order_number=${order_list[i].id}">${order_list[i].id}</a>
                            </td>    
                            <td>${order_list[i].date}</td>
                            <td>${order_list[i].price}</td>
                            <td>${status}</td>
                        </tr>
                    `)
                }

                //渲染分页
                $('.main').append(`
                    <div class="page">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination">
                            </ul>
                        </nav>
                    </div>
                `)

                if(page <= 1)
                    $('.main .pagination').append(`
                        <li class="page-item" disabled>
                            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                        </li>
                    `)
                else
                    $('.main .pagination').append(`
                        <li class="page-item">
                            <a class="page-link" href="orders.html?page=${page-1}">上一页</a>
                        </li>
                    `)

                for(let i = 1; i <= data.totalPage; i++){
                    if(page == i)
                        $('.main .pagination').append(`
                            <li class="page-item active"><a class="page-link" href="orders.html?page=${page}">${i}</a></li>
                        `)

                    else $('.main .pagination').append(`
                        <li class="page-item"><a class="page-link" href="orders.html?page=${i}">${i}</a></li>
                    `)
                }

                if(page >= data.totalPage){
                    $('.main .pagination').append(`
                        <li class="page-item" disabled><a class="page-link" href="orders.html?page=${page}">下一页</a></li>
                    `)
                }

                else
                    $('.main .pagination').append(`
                        <li class="page-item"><a class="page-link" href="orders.html?page=${page+1}">下一页</a></li>
                    `)
            }
        })
    </script>

</body>

</html>